<template>
  <el-dialog class="employee-editor" :visible="isVisible" :title="employeeForm.id ? '编辑员工' : '添加员工'" @close="onCloseDialog">
    <el-form ref="employeeFormRef" :model="employeeForm" :rules="employeeRules" size="medium">
      <!-- 员工姓名 -->
      <el-form-item label="员工姓名：" prop="name">
        <el-input v-model="employeeForm.name" placeholder="请输入员工姓名" />
      </el-form-item>
      <!-- 登录账号 -->
      <el-form-item label="登录账号：" prop="userName">
        <el-input v-model="employeeForm.userName" placeholder="请输入登录账号" />
      </el-form-item>
      <!-- 联系方式 -->
      <el-form-item label="联系方式：" prop="phonenumber">
        <el-input v-model="employeeForm.phonenumber" placeholder="请输入联系方式" />
      </el-form-item>
      <!-- 默认密码 -->
      <el-form-item label="默认密码：">
        <span>123456</span>
      </el-form-item>
      <!-- 分配角色 -->
      <el-form-item label="分配角色：" prop="roleId">
        <el-select v-model="employeeForm.roleId">
          <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
        </el-select>
      </el-form-item>
      <!-- 员工状态 -->
      <el-form-item label="员工状态：" prop="status">
        <el-radio v-model="employeeForm.status" :label="0">未启用</el-radio>
        <el-radio v-model="employeeForm.status" :label="1">启用</el-radio>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <el-button type="primary" size="medium" @click="onSaveEmployee">确定</el-button>
      <el-button size="medium" @click="onCloseDialog">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { updateEmployeeAPI, addEmployeeAPI } from '@/api/system/employee'
import { getRoleListAPI } from '@/api/system/role'

export default {
  name: 'EmployeeEditor',
  data() {
    return {
      isVisible: false, // 是否显示弹窗
      // 员工表单数据
      employeeForm: {
        name: '', // 员工姓名
        userName: '', // 登录账号
        phonenumber: '', // 联系方式
        roleId: null, // 员工角色ID
        status: 0 // 员工状态, 0: 未开启, 1: 开启
      },
      // 员工数据校验规则
      employeeRules: {
        name: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        phonenumber: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      },
      roleList: [] // 角色列表
    }
  },
  created() {
    // 获取角色列表
    this.getRoleList()
  },
  methods: {
    // 打开弹窗
    open(row) {
      if (row.id) {
        this.employeeForm = { ...row }
        delete this.employeeForm.createTime
      }
      this.isVisible = true
    },
    // 获取角色列表
    async getRoleList() {
      this.roleList = await getRoleListAPI()
      console.log(this.roleList)
    },
    // 保存员工
    onSaveEmployee() {
      // 校验表单
      this.$refs.employeeFormRef.validate(async valid => {
        if (valid) {
          // 根据id是否存在来判断是添加还是编辑
          if (this.employeeForm.id) {
            // 编辑员工
            await updateEmployeeAPI(this.employeeForm)
            this.$message.success('编辑成功')
          } else {
            // 添加员工
            await addEmployeeAPI(this.employeeForm)
            this.$message.success('添加成功')
          }
          // 通知父组件刷新员工列表
          this.$emit('update-list')
          this.onCloseDialog()
        }
      })
    },
    onCloseDialog() {
      this.isVisible = false
      // 重置表单
      this.buildingForm = {
        name: '', // 员工姓名
        userName: '', // 登录账号
        phonenumber: '', // 联系方式
        roleId: null, // 员工角色ID
        status: 0 // 员工状态, 0: 未开启, 1: 开启
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 500px;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form {
      padding: 0 50px;
    }
  }
  .el-dialog__footer {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    border-radius: 0 0 10px 10px;
  }
}
</style>
